import { FC } from "react";
import { Form, Input } from "antd";
// import { IdSelect } from "../../components/id-select";
import { UserSelect } from "../../components/user-select";
import { Project } from "../../types/project";
import { User } from "../../types/user";
interface SearchPanelProps {
  param: Partial<Pick<Project, "name" | "personId">>;
  //   name: string;
  //   personId: number
  // };>
  // param: {
  users: User[];
  setParam: (param: SearchPanelProps["param"]) => void;
}

export const SearchPanel: FC<SearchPanelProps> = (props) => {
  const { param, setParam } = props;
  const selectChange = (value: number | undefined) => {
    setParam({
      ...param,
      personId: value,
    });
  };
  return (
    <Form style={{ marginBottom: "2rem" }} layout={"inline"}>
      <Form.Item>
        <Input
          type="text"
          value={param.name}
          placeholder={"项目名"}
          onChange={(evt) =>
            setParam({
              ...param,
              name: evt.target.value,
            })
          }
        />
      </Form.Item>
      <Form.Item>
        <UserSelect
          defaultOptionName={"负责人"}
          value={param.personId}
          onChange={(value) => selectChange(value)}
        />
      </Form.Item>
    </Form>
  );
};

export default SearchPanel;
